<template>
	<view>

		<view class="swiperMain">

			<view class="swiperHead">
				<image src="../../../static/images/navigation/b5 (1).png"></image>
				<!--组件-->
				<swiperNavBar :scrollIntoView="scrollIntoView" :swiperTabList='swiperTabList'
					:swiperTabIdx='swiperTabIdx' :currentSwiperWidth='currentSwiperWidth'
					:currentSwiperHeight='currentSwiperHeight' :swiperCurrentSize='swiperCurrentSize'
					:swiperColor='swiperColor' :swiperCurrentColor='swiperCurrentColor'
					:currentSwiperLineShow="currentSwiperLineShow"
					:currentSwiperLineActiveWidth="currentSwiperLineActiveWidth"
					:currentSwiperLineActiveHeight="currentSwiperLineActiveHeight"
					:currentSwiperLineActiveBg="currentSwiperLineActiveBg"
					:currentSwiperLineAnimatie="currentSwiperLineAnimatie" v-if=" swiperTabList.length > 1 "
					@change="CurrentTab">
				</swiperNavBar>
				<!--组件-->
				<image src="../../../static/images/navigation/b5 (2).png"></image>
			</view>

			<!--内容-->
			<view class="swiperCont" :style="{ paddingTop:currentSwiperHeight + 'rpx' }">
				<swiper class="swiper" :style="{ height:mainHeight + 'px' }" :current="swiperTabIdx"
					@change="SwiperChange">
					<swiper-item class="swiperItem" v-for="(item,index) in swiperTabList" :key='index'>
						<u-waterfall v-model="flowList" ref="uWaterfall">
							<template v-slot:left="{leftList}">
								<view class="demo-warter" v-for="(item, index) in leftList" :key="index"
									@click="clickUrl(item.id,item)">
									<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
									<u-lazy-load threshold="-450" border-radius="10" :image="url+item.image[0]"
										:index="index">
									</u-lazy-load>
									<view class="demo-title">
										{{item.title}}
									</view>
									<view class="demo-tag">
										<image src="../../../static/images/navigation/zan.png"></image>
										<view class="demo-tag-text">
											{{item.likes}}
										</view>
										<u-avatar :src="url+item.icon" mode="circle" size="60"></u-avatar>
									</view>
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="demo-warter" v-for="(item, index) in rightList" :key="index"
									@click="clickUrl(item.id,item)">
									<u-lazy-load threshold="-450" border-radius="10" :image="url+item.image[0]"
										:index="index">
									</u-lazy-load>
									<view class="demo-title">
										{{item.title}}
									</view>
									<view class="demo-tag">
										<image src="../../../static/images/navigation/zan.png"></image>
										<view class="demo-tag-text">
											{{item.likes}}
										</view>
										<u-avatar :src="url+item.icon" mode="circle" size="60"></u-avatar>
									</view>
									<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
										@click="remove(item.id)"></u-icon> -->
								</view>
							</template>
						</u-waterfall>
					</swiper-item>
				</swiper>
			</view>
			<!--内容-->

		</view>
	</view>
</template>

<script>
	import swiperNavBar from "components/SwiperNavBar/swiperNavBar.vue";
	export default {
		data() {
			return {
				//导航
				scrollIntoView: 0, //设置哪个方向可滚动，则在哪个方向滚动到该元素
				swiperTabList: ['推荐', '附近'], //导航列表
				swiperTabIdx: 0,
				swiperCurrentSize: '36rpx', //导航的字体大小
				swiperColor: '#333333', //导航栏字体未选中前颜色
				swiperCurrentColor: '#4b5ad9', //选中当前导航栏字体颜色
				currentSwiperWidth: '25%', //当前导航的宽度 % upx rpx px  （导航超出可左右滑动 ）
				currentSwiperHeight: 160, //当前导航的高度度 rpx px
				mainHeight: 900, //全屏或者局部滑动设置的高度
				currentSwiperLineShow: true, //是否显示导航栏的线条 （线条距离标题太近的话可自行修改.swiperLine的css）
				currentSwiperLineActiveBg: '#4b5ad9', //当前选中的导航栏线条颜色
				currentSwiperLineActiveWidth: '72rpx', //当前选中的导航栏线条的宽度 upx rpx px
				currentSwiperLineActiveHeight: '6rpx', //当前选中的导航栏线条的高度度 upx rpx px
				currentSwiperLineAnimatie: 300, //当前选中的导航栏线条过渡效果


				//（全屏出现滚动条 去掉paddingTop 但导航栏会遮住部分内容 自行改.swiperCont .swiper里css）
				//也可获取导航栏的高度  屏幕高度减去导航栏高度 = 你的内容全屏高度  不会出现滚动条
				flowList: [],
				url: "",
				dynamic: [],
				imgurl: [],
				form: {
					page: 0,
					limit: 8,
				},
			}
		},
		onShow() {
			var icon = plus.nativeObj.View.getViewById("icon");
			if (icon) {
				setTimeout(function() {
					icon.show();
				}, 100)
			}

		},
		onLoad() {
			this.url = this.$url;
			this.apiData();
		},
		onReachBottom() {
			// 数据加载
			setTimeout(() => {
				this.apiData();
			}, 1000)
		},
		components: {
			swiperNavBar
		},
		onReady() {

			//this.mainHeight = uni.getSystemInfoSync().windowHeight;//获取屏幕的高度使得全屏左右滑动
			//console.log(this.mainHeight)

		},
		methods: {

			//tab点击事件 自行完善需要的代码
			CurrentTab: function(index, item) {
				this.swiperTabIdx = index;
				this.scrollIntoView = Math.max(0, index - 1);
				//console.log(index + '----' + item)
			},
			//滑动事件  自行完善需要的代码
			SwiperChange: function(e) {
				//console.log(e)
				//console.log(e.detail)
				//console.log(e.detail.current);
				this.swiperTabIdx = e.detail.current;
				this.scrollIntoView = Math.max(0, e.detail.current - 1);
			},
			addRandomData() {
				for (let i = 0; i < this.dynamic.length; i++) {
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱 
					let url = JSON.stringify(this.dynamic[i].image);
					url = url.substr(1);
					url = url.substring(0, url.length - 1);
					this.imgurl = url.split(','); 
					let key = "image";
					this.dynamic[i][key] = this.imgurl;
					// let item = JSON.parse(JSON.stringify(this.dynamic[index]))
					let item = this.dynamic[i]; 
					this.flowList.push(item);
				}
			},
			clickUrl(id, item) {
				uni.navigateTo({
					url: "/pages/dynamicDetails/oneDynamic/oneDynamic?dynamic=" + encodeURIComponent(JSON.stringify(item)),
				})
			},
			apiData() {
				this.form.page = this.form.page + 1;
				this.$sendRequest({
					url: "/dynamic/lists",
					method: 'GET',
					data: this.form,
					success: (res) => {
						this.dynamic = res.data.records
						this.addRandomData();
					}
				})
			},

		},

	}
</script>

<style>
	.swiperMain {
		width: 100%;
	}

	.swiperHead {
		margin: 0 auto;
		position: fixed;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 150rpx;
		background: #FFFFFF;
		display: flex;
	}

	.swiperHead scroll-view {

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.swiperHead image:first-child {
		margin-top: 70rpx;
		margin-left: 20rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.swiperHead image:nth-child(3) {
		margin-top: 80rpx;
		margin-right: 20rpx;
		width: 55rpx;
		height: 55rpx;
	}

	.swiperTab {
		margin-left: 30rpx;
		display: inline-flex;
		flex-direction: column;
		text-align: center;
	}

	.swiperCont {
		width: 100%;
		padding-top: 70rpx;
	}


	.swiper {
		width: 100%;
		height: 400rpx;
	}

	.swiperItem {
		height: 400rpx;
		overflow: auto;
	}

	.swiperItem image {
		width: 100%;
		height: 100%;
		display: block;
	}
</style>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag image {
		margin-top: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.demo-tag-text {
		width: 235rpx;
		line-height: 1;
		padding: 4rpx 9rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
</style>
